<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>会员中心-所有订单</title>
    <!-- 引入样式-->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.1/theme-chalk/index.min.css">
    <!-- 引入组件库 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.1/index.min.js"></script>

    <link rel="stylesheet" href="layui/css/layui.css"/>
    <script type="text/javascript" src="layui/layui.js"></script>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <link rel="stylesheet" href="css/index.css"/>
    <!--该页面需要登录的权限认证-->
    <script src="js/auth.js"></script>
    <style>
        /*左侧菜单列表*/

        .my-usercenter-list {
        }

        .my-usercenter-list a {
            display: block;
            width: 60%;
            height: 30px;
            text-indent: 50px;
            line-height: 30px;
            font-size: 16px;
            margin: 10px 0px;
        }

        .my-usercenter-list a:hover {
            background-color: #FF4400;
            color: #fff;
        }

        /*菜单标题*/

        .list-title {
            width: 60%;
            height: 35px;
            font-size: 16px;
            font-weight: bold;
            line-height: 35px;
            margin: 20px 0px 5px;
            text-indent: 30px;
        }
    </style>
    <script>
        /*
        $(function () {

            //回到顶部按钮
            $("#my-backtop").click(function () {
                $("html,body").animate({
                    scrollTop: 0
                }, 500);
            });

            //鼠标滚动事件，显式回到顶部按钮
        });*/
    </script>
</head>

<body>

<!-- 引入头部 -->
<div>
    <iframe src="header.html" scrolling="no" style="height:140px;width: 100%;border: 0px;"></iframe>
</div>
<!--引入头部end-->

<div class="my-index-body" id="app" style="background-color: #fff;">
    <!--横向导航栏-->
    <div class="my-daohang1">
        <div class="layui-container">
            <div class="layui-row">
                <!--菜单-->
                <div class="layui-col-md9" style="height: 50px;">
                    <a href="">首页</a>
                    <a href="">优抢购</a>
                    <a href="">聚划算</a>
                    <a href="">大转盘</a>
                    <a href="">会员折扣</a>
                    <a href="">买家秀</a>
                </div>
            </div>
        </div>
    </div>
    <!--横向导航end-->

    <!-- 内容主体  -->
    <div class="layui-container">
        <div class="layui-row">
            <!-- 左侧菜单 -->
            <div class="layui-col-md3 my-usercenter-list">
                <ul>
                    <li class="list-title">会员资料</li>
                    <li>
                        <ul class="erji-list">
                            <li>
                                <a href="userCenter.html">个人信息</a>
                            </li>
                            <li>
                                <a href="userAddress.html">收货地址</a>
                            </li>
                        </ul>
                    </li>
                    <li class="list-title">我的订单</li>
                    <li>
                        <ul class="erji-list">
                            <li>
                                <a href="userOrder.html">所有订单</a>
                            </li>
                            <li>
                                <a href="userOrder.html">待付款订单</a>
                            </li>
                            <li>
                                <a href="userOrder.html">待发货订单</a>
                            </li>
                            <li>
                                <a href="userOrder.html">待收货订单</a>
                            </li>
                            <li>
                                <a href="userOrder.html">已完成订单</a>
                            </li>
                            <li>
                                <a href="userOrder.html">已关闭订单</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
            <!-- 左侧菜单end -->

            <!-- 右侧内容 -->
            <div class="layui-col-md9 my-usercenter-content">
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
                    <legend>所有订单</legend>
                </fieldset>

                <table class="layui-table my-shopping-table" lay-skin="line">
                    <colgroup>
                        <col width="200">
                        <col width="100">
                        <col width="180">
                        <col width="100">
                        <col width="100">
                        <col width="100">
                        <col width="60">
                    </colgroup>
                    <thead>
                    <tr>
                        <th style="font-weight: bold;font-size: smaller">
                            订单编号
                        </th>
                        <th style="text-align: center;font-weight: bold;font-size: smaller">
                            用户编号
                        </th>
                        <th style="text-align: center;font-weight: bold;font-size: smaller">
                            真实姓名
                        </th>
                        <th style="text-align: center;font-weight: bold;font-size: smaller">
                            总金额
                        </th>
                        <th style="text-align: center;font-weight: bold;font-size: smaller">
                            订单状态
                        </th>
                        <th style="text-align: center;font-weight: bold;font-size: smaller">
                            付款日期
                        </th>
                        <th style="text-align: center;font-weight: bold;font-size: smaller">
                            操作
                        </th>
                    </tr>
                    </thead>
                    <tbody>

                    <tr v-for="(order,index) in orderList" :key="index">
                        <td>
                            <div style="float: left;">
                                {{order.oid}}
                            </div>
                        </td>
                        <td align="center">
                            <span>{{order.uid}}</span>
                        </td>
                        <td align="center">
                            <span>{{order.realname}}</span>
                        </td>
                        <td align="center">
                            {{order.totalPrice}}
                        </td>

                        <td align="center">
                            <span v-if ="order.ispay">已付款</span>
                            <span v-else>未付款</span>
                        </td>


                        <td align="center">
                            {{order.createTime}}
                        </td>
                        <td align="center">
                            <button class="layui-btn layui-btn-success" v-if ="order.ispay">详情</button>
                            <button class="layui-btn layui-btn-warm" v-else>支付</button>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <!-- 右侧内容end -->
        </div>
    </div>
    <!-- 内容主体end -->

    <!--引入底部-->
    <div class="my-footer">
        <iframe src="footer.html" scrolling="no" style="border: 0px;width: 100%;height: 291px;"></iframe>
    </div>
    <!--引入底部end-->

    <!--回到顶部按钮-->
    <div id="my-backtop">
        <span class="layui-icon layui-icon-up"></span>
    </div>

</div>

<script src="js/include/libs.js"></script>

<script>
    layui.use(['element', 'carousel', 'laypage'], function () {
        var element = layui.element;
        var carousel = layui.carousel;
        var laypage = layui.laypage;

        //执行一个laypage实例
        laypage.render({
            elem: 'test1',
            count: 100,
            theme: '#FF5722'
        });

        //建造实例
        carousel.render({
            elem: '#test1',
            width: '100%' //设置容器宽度
            ,
            arrow: 'always' //始终显示箭头
            //,anim: 'updown' //切换动画方式
        });
    });

    //生成一个vue对象；

    let vm = new Vue({
        el: '#app',
        data: {
            orderList: [], //该用户的订单集合；
            currentLoginSuccessUser: {},
        },
        mounted() {
            this.currentLoginSuccessUser = JSON.parse(localStorage.getItem("currentLoginSuccessUserInfo"));
            console.log("=====当前登录成功的用户信息如下====")
            console.log(this.currentLoginSuccessUser);

            this.initOrderList();
        },

        methods: {
            initOrderList() {
                queryOrderListByUid(this.currentLoginSuccessUser.uid).then(resp=>{
                    if(resp.data.code === 200){
                        this.orderList = resp.data.data;
                        console.log("------订单集合是-------")
                        console.log(this.orderList);
                    }
                })
            }
        }
    })
</script>


</body>

</html>